Overview

Fancytree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag'n'drop, and lazy loading. Main features:

• Lazy loading and very efficient and performant handling of large data sets
• Keyboard navigation
• (Hierarchical) selection and checkboxes
• Table view (gridview)
• Drag and drop
• Persistence of expansion, selection and active state
• Inline editing
• Themable (comes with WinXP, Win7, Win8, OS X Lion, and Glyph samples)
• The tree behaves like a single form control, i.e. it is 'tabbable' (example)
• Rich object oriented API
• Extensible modular design
• and more ...

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load jQuery UI -->
<script type="text/javascript" src="assets/js/core/libraries/jquery_ui/full.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/trees/fancytree_all.min.js"></script>

<!-- Add list markup -->
<div class="tree-default">
	<ul>
		<li class="folder expanded">Expanded folder with children
			<ul>
				<li class="expanded">Expanded sub-item
					<ul>
						<li class="active focused">Active sub-item (active and focus on init)</li>
						<li>Basic <i>menu item</i> with <strong class="text-semibold">HTML support</strong></li>
					</ul>
				</li>
				<li>Collapsed sub-item
					<ul>
						<li>Sub-item 2.2.1</li>
						<li>Sub-item 2.2.2</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="has-tooltip" title="Look, a tool tip!">Menu item with key and tooltip</li>
		<li class="folder">Collapsed folder
			<ul>
				<li>Sub-item 1.1</li>
				<li>Sub-item 1.2</li>
			</ul>
		</li>
		<li class="selected">This is a selected item</li>
		<li class="expanded">Document with some children (expanded on init)
			<ul>
				<li>Document sub-item</li>
				<li>Another document sub-item
					<ul>
						<li>Sub-item 2.1.1</li>
						<li>Sub-item 2.1.2</li>
					</ul>
				</li>
			</ul>
		</li>	
	</ul>
</div>

// Basic initialization
$(".tree-default").fancytree({
    init: function(event, data) {
        $('.has-tooltip .fancytree-title').tooltip();
    }
});

Plugin options

Plugin events

Events are called like this: `CALLBACK_NAME(event, data)` where `event` is a jQuery Event object and `data` is of type EventData The `this` context is set to tree's the HTMLDivElement:

Overview

FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar. FullCalendar is great for displaying events, but it isn't a complete solution for event content-management. Beyond dragging an event to a different time/day, you cannot change an event's name or other associated data. It is up to you to add this functionality through FullCalendar's event hooks.

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load Moment.js extensions -->
<script type="text/javascript" src="assets/js/plugins/ui/moment/moment.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/ui/fullcalendar/fullcalendar.min.js"></script>

<!-- Add DIV element -->
<div class="fullcalendar-basic"></div>

// Basic initialization
$('.fullcalendar-basic').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    defaultDate: '2014-11-12',
    editable: true,
    events: [
        {
            title: 'All Day Event',
            start: '2014-11-01'
        },
        {
            title: 'Long Event',
            start: '2014-11-07',
            end: '2014-11-10'
        },
        ...
    ]
});

Fullcalendar documentation

Complete Fullcalendar documentation can be found online on Official library website. It's quite big, with a lot of options, events and methods. Also check out Google Calendar integration. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Fullcalendar library.

Overview

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up. Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load core -->
<script type="text/javascript" src="assets/js/plugins/ui/headroom/headroom.min.js"></script>

<!-- Load jQuery plugin -->
<script type="text/javascript" src="assets/js/plugins/ui/headroom/headroom_jquery.min.js"></script>

<!-- Add navbar markup -->
<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="navbar-header">
		...
	</div>

	<div class="navbar-collapse collapse" id="navbar-mobile">
		...
	</div>
</div>

// Basic initialization
$(".navbar-fixed-top").headroom({
    classes: {
        pinned: "headroom-top-pinned",
        unpinned: "headroom-top-unpinned"
    },
    offset: $('.navbar').outerHeight(),
    onUnpin : function() {
        $('.navbar .dropdown-menu').parent().removeClass('open');
    }
});

How does it work?

<!-- Initially -->
<div class="headroom">

<!-- Scrolling down -->
<div class="headroom headroom--unpinned">

<!-- Scrolling up -->
<div class="headroom headroom--pinned">

Relying on CSS classes affords headroom.js incredible flexibility. The choice of what to do when scrolling up or down is now entirely yours - anything you can do with CSS you can do in response to the user's scroll.

Plugin options

Headroom.js can also accept an options object to alter the way it behaves. You can see the default options by inspecting Headroom.options. The structure of an options object is as follows:

// Basic initialization
{
    // vertical offset in px before element is first unpinned
    offset : 0,

    // scroll tolerance in px before state changes
    tolerance : 0,

    // or you can specify tolerance individually for up/down scroll
    tolerance : {
        up : 5,
        down : 0
    },

    // css classes to apply
    classes : {

        // when element is initialised
        initial : "headroom",

        // when scrolling up
        pinned : "headroom--pinned",

        // when scrolling down
        unpinned : "headroom--unpinned",

        // when above offset
        top : "headroom--top",

        // when below offset
        notTop : "headroom--not-top"
    },

    // element to listen to scroll events on, defaults to `window`
    scroller : someElement,

    // callback when pinned, `this` is headroom object
    onPin : function() {},

    // callback when unpinned, `this` is headroom object
    onUnpin : function() {},

    // callback when above offset, `this` is headroom object
    onTop : function() {},

    // callback when below offset, `this` is headroom object
    onNotTop : function() {}
}

Overview

Features of the drill down menu plugin include – saved state using cookies, add count of total number of child links to each menu option and offers 3 different ways to navigate:

• Using a breadcrumb style menu at the top of the drill down menu
• A back button to return to previous options
• Selecting previous link headers, which are fixed at the top of the menu so the user can see the path taken

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/ui/drilldown.js"></script>

<!-- Add list markup -->
<ul id="drilldown">
	<li>
		<a href="#">Category</a>
		<ul>
			<li>
				<a href="#">Range</a>
				<ul>
					<li>
						<a href="#">Manufacturer 1</a>
						<ul>
							<li><a href="#">Product A</a></li>
							<li><a href="#">Product B</a></li>
							<li><a href="#">Product C</a></li>
							<li><a href="#">Product D</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Manufacturer 2</a>
						<ul>
							<li><a href="#">Product E</a></li>
							<li><a href="#">Product F</a></li>
							<li><a href="#">Product G</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

// Basic initialization
$('#drilldown').dcDrilldown({
    defaultText: 'Back to parent',
    saveState: true
});

Plugin options

There are several options, which can be configured for the drill down menu plugin. The default options are:

// Default options
$.fn.dcDrilldown = function(options) {
    var defaults = {
        classWrapper: 'dd-wrapper',    // Allows you to change the wrapper for the menu
		classMenu: 'dd-menu',    // Set the class used for the menu
        classParent: 'dd-parent',    // Set the class used for parent li tags
        classParentLink: 'dd-parent-a',    // Set the class used for parent a tags
        classActive: 'active-ul',    // Set the class for active (clicked) links
        classHeader : 'dd-header',    // Set the class of the menu header - contains the breadcrumbs & header tag
		eventType : 'click',    // Click or hover
		hoverDelay: 300,    // Hover event type delay
        saveState: true,    // If set to true the menu state will be saved using cookies - requires cookie plugin
        showCount: false,    // If set to true the count of the number of links for that option is inserted into the a tag
        classCount: 'dd-count',    // Set the class of the span containing the count
        classIcon: 'dd-icon',    // Set the class of the span for adding an icon to the parent links
        linkType: 'backlink',    // Selects the type of navigation - 3 options available (see below)
        resetText: 'All',    // The text used for the breadcrumb link that resets the menu
        headerTag: 'h6',    // The tag used for the menu header
        defaultText: 'Select Option',    // The default text inserted into the header when the menu is initialised
        includeHdr: true    // Set to false to remove the menu header tag
    };
};

Options for navigation style

You can override any of these default options by passing an object into the Drill Down Menu method upon initialisation – e.g:

// Overridden defaults
$('#drilldown').dcDrilldown({
        classParent: 'parent-class',
        classActive: 'active',
        linkType: 'link',
        saveState: false,
        resetText: 'Back To Start',
        defaultText: 'Choose An Option',
        includeHdr: false,
        showCount: true
    });

Overview

Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style. Easy-to-use solution to have a custom scrollbars compatble with destkop, tablet and phone devices. Supports DIVs, IFrames, textarea, and document page (body) scrollbars. On modern browsers hardware accelerated scrolling has implemented. Using animationFrame for a smoothest and cpu-saving scrolling (when browser supports).

Core features:

• simple installation and activation, it works with NO modification of your code. (some exceptions can happen, so you can write to me)
• very stylish scrollbars, with no occupation on your window (original browser scrollbars need some of page space and reduces window/div usable width)
• you can style main document scrollbar (body) too!! (not all script implements this feature)
• on all browsers you can scroll: dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys)
• scroll is smooth (as modern tablet browsing), speed is customizable
• zoom feature
• hardware accelerated scroll (where available)
• animation frame support for smoth scrolling and cpu-saving
• dragging scroll mode with scrolling momentum (as touch device)
• tested for all major browsers desktop and mobile versions
• support for touch devices
• support for multi-input devices (IE10 with MSPointer)
• compatible with many other browsers, including IE6, Safari on Mac and WP7 Mango!
• very customizable aspect of bar
• native scroll events are working yet
• fully integrated with jQuery
• compatibile with jQuery UI, jQuery Touch, jQuery Mobile

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/ui/nicescroll.min.js"></script>

// 1. Simple mode, it styles document scrollbar:
$(document).ready(function() {  
    $("html").niceScroll();
});

// 2. Instance with object returned:
var nice = false;
$(document).ready(function() {  
    nice = $("html").niceScroll();
});

// 3. Style a DIV and chage cursor color:
$(document).ready(function() {  
    $("#thisdiv").niceScroll({cursorcolor:"#00F"});
});

// 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:
$(document).ready(function() {
    $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
});

// 1. Get nicescroll object:
var nice = $("#mydiv").getNiceScroll();

// 2. Hide scrollbars:
$("#mydiv").getNiceScroll().hide();

// 3. Check for scrollbars resize (when content or position have changed):
$("#mydiv").getNiceScroll().resize();

// 4. Scrolling to a position:
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

Plugin options

When you call niceScroll you can pass some parameters to custom visual aspects:

Overview

Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options. Supports events and public methods, has flexible settings, can be completely altered with CSS. Cross-browser: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+. Also supports touch-devices (iPhone, iPad, Nexus, etc.). Key slider features:

• Skin support
• Any number of sliders at one page without conflicts and big performance problems
• Two slider types single (1 slider) and double (2 sliders)
• Support of negative and fractional values
• Ability to set custom step and snap grid to step
• Support of custom values diapason
• Customisable grid of values
• Ability to disable UI elements (min and max, current value, grid)
• Postfixes and prefixes for your numbers ($20, 20 € etc.)
• Additional postfix for maximum value (eg. $0 — $100+)
• Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
• Slider writes its value right into input value field. This makes it easy to use in any html form
• Any slider value can be set through input data-attribute (eg. data-min="10")
• Slider supports disable param. You can set it true to make slider inactive
• Slider supports external methods (update, reset and remove) to control it after creation
• For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes all its params to callback first argument as object
• Slider supports date and time

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/sliders/ion_rangeslider.min.js"></script>

<!-- Add DIV element -->
<div id="ion-slider-default"></div>

// Initialize
$("#ion-slider-default").ionRangeSlider({
	// options
});

Plugin options

Overview

noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/sliders/nouislider.min.js"></script>

<!-- Add DIV element -->
<div id="noui-slider-default"></div>

// Define element
var slider = document.getElementById('noui-slider-default');

// Initialize with options
noUiSlider.create(slider, {
	start: [20, 80],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});

Plugin options

noUiSlider can be configured with a wide variety of options, which can be use to customize the slider in to doing exactly what you want:

Slider behaviour

noUiSlider offers several ways to handle user interaction. The range can be set to drag, and handles can move to taps. All these effects are optional, and can be enable by adding their keyword to the behaviour option. This option accepts a "-" separated list of "drag", "tap", "fixed", "snap" or "none".

Overview

A simple jQuery image cropping plugin with enhanced features and suppot of: options, methods, events, touch devices, zomoing, rotation, scale, canvas and multiple croppers on the page.

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/media/cropper.min.js"></script>

<!-- Basic markup -->
<div class="container">
	<img src="picture.jpg">
</div>

// Initialize
$('.container > img').cropper({
	aspectRatio: 16 / 9,
	crop: function(e) {
		// Output the result data for cropping image.
		console.log(e.x);
		console.log(e.y);
		console.log(e.width);
		console.log(e.height);
		console.log(e.rotate);
		console.log(e.scaleX);
		console.log(e.scaleY);
	}
});

Plugin options

You may set cropper options with $().cropper(options). If you want to change the global default options, you may use $.fn.cropper.setDefaults(options).

Plugin events

// Events example
$().on('cropstart.cropper', function (e) {
	console.log(e.type); // cropstart
	console.log(e.namespace); // cropper
	console.log(e.action); // ...
	console.log(e.originalEvent.pageX);

	// Prevent to start cropping, moving, etc if necessary
	if (e.action === 'crop') {
		e.preventDefault();
	}
});

Available events:

Overview

FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/media/fancybox.min.js"></script>

<!-- Image 1 -->
<a class="fancybox" rel="group" href="big_image_1.jpg">
	<img src="small_image_1.jpg" alt="">
</a>

<!-- Image 1 -->
<a class="fancybox" rel="group" href="big_image_2.jpg">
	<img src="small_image_2.jpg" alt="">
</a>

// Initialize
$(document).ready(function() {
	$(".fancybox").fancybox({
		// options
	});
});

Plugin options

You can pass these options as key/value object to fancybox() method. It is also possible to modify defaults directly at fancyBox JS file or $.fancybox.defaults

Overview

Bootstrap progressbar is a jQuery plugin which extends the basic bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load Bootstrap -->
<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/loaders/progressbar.min.js"></script>

// Basic markup
<div class="progress">
	<div class="progress-bar" data-transitiongoal="75" aria-valuemin="-1337" aria-valuemax="9000"></div>
</div>

// Initialize
$('.progress .progress-bar').progressbar({
	// options
});

Plugin options

Overview

A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing

Usage

Note: You need to include both ladda.min.js and spin.min.js files, because these 2 libraries work together.

Ladda buttons must be given the class ladda-button and the button label needs to have the ladda-label class. The ladda-label will be automatically created if it does not exist in the DOM. Below is an example of a button which will use the expand-right animation style:

<!-- Markup -->
<button class="ladda-button" data-style="expand-right">
	<span class="ladda-label">Submit</span>
</button>

// Automatically trigger the loading animation on click
$( 'input[type=submit]' ).ladda( 'bind' );

// Same as the above but automatically stops after two seconds
$( 'input[type=submit]' ).ladda( 'bind', { timeout: 2000 } );

// Create a new instance of ladda for the specified button
var l = $( '.my-button' ).ladda();

// Start loading
l.ladda( 'start' );

// Will display a progress bar for 50% of the button width
l.ladda( 'setProgress', 0.5 );

// Stop loading
l.ladda( 'stop' );

// Toggle between loading/not loading states
l.ladda( 'toggle' );

// Check the current state
l.ladda( 'isLoading' );

// Stop all loading animations
$.ladda( 'stopAll' );

Options

Overview

Dragula - drag and drop library that just works. It doesn't just depend on bloated frameworks and actually understands where to place the elements when they are dropped. And it doesn't need you to do a zillion things to get it to work. Dragula provides the easiest possible API to make drag and drop a breeze in your applications. Key library features:

• Super easy to set up
• No bloated dependencies
• Figures out sort order on its own
• A shadow where the item would be dropped offers visual feedback
• Touch events!
• Seamlessly handles clicks without any configuration

Usage

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/ui/dragula.min.js"></script>

<!-- Left container -->
<div id="left">
	...
</div>
<!-- /left container -->

<!-- Right container -->
<div id="right">
	...
</div>
<!-- /right container -->

// Initialize
dragula([
	document.querySelector('#left'),
	document.querySelector('#right')
]);

Plugin options

You can also provide an options object. Here's an overview of the default values:

// Defaults
dragula(containers, {
	isContainer: function (el) {
		return false; // only elements in drake.containers will be taken into account
	},
	moves: function (el, source, handle, sibling) {
		return true; // elements are always draggable by default
	},
	accepts: function (el, target, source, sibling) {
		return true; // elements can be dropped in any of the `containers` by default
	},
	invalid: function (el, target) {
		return false; // don't prevent any drags from initiating by default
	},
	direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
	copy: false,                       // elements are moved by default, not copied
	copySortSource: false,             // elements in copy-source containers can be reordered
	revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
	removeOnSpill: false,              // spilling will `.remove` the element, if this is true
	mirrorContainer: document.body,    // set the element that gets mirror elements appended
	ignoreInputTextSelection: true     // allows users to select input text, see details below
});

Plugin options

Plugin events